import React from 'react';
import { Table, Tabs, Tooltip } from 'antd';
import { createDictionary } from '@/dictionary';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import AuthComponent from '@/utils/auth/AuthComponent';
import { history } from 'umi'
import SupervisorProfileGroup from './SupervisorProfileGroup';

const [, getSupervisorStatusText] = createDictionary('SUPERVISOR_STATUS');

// 主管表格配置
const columns_supervisor = [
    {
        title: '管理机构',
        dataIndex: 'organizationName',
        key: 'organizationName',
        align: 'center',
        render: text => text || '--'
    },
    {
        title: '称呼',
        dataIndex: 'titleName',
        key: 'titleName',
        align: 'center',
        render: text => text || '--'
    },
    {
        title: '员工',
        dataIndex: 'organizationStaffNum',
        key: 'organizationStaffNum',
        align: 'center',
        render: text => text || '--'
    },
    {
        title: '审批状态',
        dataIndex: 'status',
        key: 'status',
        render: text =>
            text ? (
                <span style={Number(text) === 1 ? { color: '#FFA22D' } : {}}>{getSupervisorStatusText(text)}</span>
            ) : (
                '--'
            )
    },
    {
        title: '任命人',
        dataIndex: 'appointEmployeeName',
        key: 'appointEmployeeName',
        align: 'center',
        render: text => text || '--'
    },
    {
        title: '任命时间',
        dataIndex: 'appointTime',
        key: 'appointTime',
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--')
    },
    {
        title: '卸任时间',
        dataIndex: 'leaveTime',
        key: 'leaveTime',
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--')
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align: 'center',
        render: (text, record) => (
            <>
                <AuthComponent code="office:orgs:employee:leaderInfo">
                    <Tooltip placement="top" title="查看详情">
                        <IconFont
                            isButton
                            style={{ fontSize: '20px' }}
                            icon="iconchakanxiangqing"
                            onClick={() =>
                                history.push({
                                    pathname: '/personal/portal/myAuditRead/myAuditReadDetail',
                                    query: { applicationNo: record.applicationNo },
                                    state: { tabRoute: true }
                                })
                            }
                        />
                    </Tooltip>
                </AuthComponent>
            </>
        )
    }
];

const Wrapper = ({ children, showWrap = true }) => {
    if (showWrap) {
        return <SupervisorProfileGroup title="微微历程">{children}</SupervisorProfileGroup>;
    }
    return children;
};

/**
 * 微微历程
 */
const GroupingOfCourse = props => {
    const { data, showWrap } = props;
    const { leaderHistoryData, courseData } = data;
    return (
        <Wrapper showWrap={showWrap}>
            <Tabs defaultActiveKey="1">
                <Tabs.TabPane tab={`主管记录 (${leaderHistoryData?.length || 0})`} key="1">
                    <Table
                        rowKey="id"
                        bordered
                        columns={columns_supervisor}
                        dataSource={leaderHistoryData}
                        pagination={false}
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab="绩效记录 (0)" key="2">
                    <Table
                        rowKey="id"
                        bordered
                        columns={[
                            {
                                title: '考核周期',
                                key: 'a',
                                align: 'center'
                            },
                            {
                                title: '绩效等级',
                                key: 'b',
                                align: 'center'
                            },
                            {
                                title: '价值观',
                                key: 'c',
                                align: 'center'
                            },
                            {
                                title: '考核人',
                                key: 'd',
                                align: 'center'
                            },
                            {
                                title: '操作',
                                key: 'e',
                                align: 'center'
                            }
                        ]}
                        dataSource={[]}
                        pagination={false}
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab={`人事记录 (${courseData?.length || 0})`} key="3">
                    <Table
                        rowKey="id"
                        bordered
                        columns={[
                            {
                                title: '变动类型',
                                dataIndex: 'changeType',
                                key: 'changeType',
                                render: text => text || '--'
                            },
                            {
                                title: '岗位',
                                dataIndex: 'dutyAlias',
                                key: 'dutyAlias',
                                render: text => text || '--'
                            },
                            {
                                title: '职位',
                                dataIndex: 'post',
                                key: 'post',
                                render: text => text || '--'
                            },
                            {
                                title: '所在机构',
                                dataIndex: 'organizationName',
                                key: 'organizationName',
                                render: text => text || '--'
                            },
                            {
                                title: '日期',
                                dataIndex: 'vvDatetime',
                                key: 'vvDatetime',
                                render: text => text || '--'
                            }
                        ]}
                        dataSource={courseData}
                        pagination={false}
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab="奖惩记录 (0)" key="4">
                    <Table
                        rowKey="id"
                        bordered
                        columns={[
                            {
                                title: '奖惩项',
                                key: 'a',
                                align: 'center'
                            },
                            {
                                title: '类别',
                                key: 'b',
                                align: 'center'
                            },
                            {
                                title: '原因',
                                key: 'c',
                                align: 'center'
                            },
                            {
                                title: '金额',
                                key: 'd',
                                align: 'center'
                            },
                            {
                                title: '操作',
                                key: 'e',
                                align: 'center'
                            }
                        ]}
                        dataSource={[]}
                        pagination={false}
                    />
                </Tabs.TabPane>
                <Tabs.TabPane tab="培训记录 (0)" key="5">
                    <Table
                        rowKey="id"
                        bordered
                        columns={[
                            {
                                title: '课程名称',
                                key: 'a',
                                align: 'center'
                            },
                            {
                                title: '课程类型',
                                key: 'b',
                                align: 'center'
                            },
                            {
                                title: '培训结果',
                                key: 'c',
                                align: 'center'
                            },
                            {
                                title: '培训时间',
                                key: 'd',
                                align: 'center'
                            },
                            {
                                title: '操作',
                                key: 'e',
                                align: 'center'
                            }
                        ]}
                        dataSource={[]}
                        pagination={false}
                    />
                </Tabs.TabPane>
            </Tabs>
        </Wrapper>
    );
};

export default GroupingOfCourse;
